<template>
	<div class="main">
		<div>
			<div>
				<img src="@/assets/images/wechat/student/levelrank/top.png">
			</div>
			<div>
				<div>
					<!-- 获取金币 -->
					<div>获取金币</div>
				</div>
				<div>
					<!-- 每一行的数据 -->
					<div v-for="(item,index) in dataList" :key="index">
						<div>
							<div>
								<div>{{index+1}}</div>
								<div>
									<img src="@/assets/images/wechat/student/levelrank/level.png">
								</div>
								<div>平民</div>
							</div>
							<div>
								<div>
									<img src="@/assets/images/wechat/student/levelrank/reward.png">
								</div>
								<div>赏金：20</div>
							</div>
							<div>
								<van-rate
								  v-model="value"
								  :size="10"
								  void-icon="star"
								  void-color="#0F5B35"
								  readonly
								  :count="index+1"
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				dataList:[{},{},{},{},{},{},{}]
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #640914;
		>div{
			margin-left:19px;
			margin-right:19px;
			margin-top:34px;
			>div:nth-child(1){
				>img{
					width:100%;
				}
			}
			>div:nth-child(2){
				margin-top:9px;
				background-color: #F2ECDD;
				border-radius: 10px;
				overflow: hidden;
				>div:nth-child(1){
					margin-left:5px;
					margin-right:5px;
					//获取金币
					overflow: hidden;
					>div{
						border-radius: 5px;
						color:#FFFFFF;
						font-size:9px;
						width:60px;
						text-align: center;
						line-height:24px;
						background-color: #4A9379;
						float: right;
					}
					
				}
				>div:nth-child(2){
					//每一行的数据
					margin-left:5px;
					margin-right:5px;
					margin-bottom:200px;
					margin-top:8px;
					>div{
						background-color: #F4E7BC;
						height:32px;
						border-radius: 10px;
						border: 1px solid #ADA08A;
						margin-top:2px;
						>div{
							margin-left:7px;
							margin-right:7px;
							display: flex;
							height:32px;
							align-items: center;
							>div:nth-child(1){
								display:flex;
								align-items: center;
								margin-right:14px;
								>div:nth-child(1){
									font-size: 14px;
									font-weight: 400;
									color: #FFFFFF;
								}
								>div:nth-child(2){
									margin-left:10px;
									margin-right:10px;
									>img{
										width:100%;
									}
								}
								>div:nth-child(3){
									font-size: 12px;
									font-weight: 400;
									color: #0F5B35;
								}
							}
							>div:nth-child(2){
								display:flex;
								align-items: center;
								flex:1;
								>div:nth-child(1){
									>img{
										width:100%;
									}
								}
								>div:nth-child(2){
									margin-left:4px;
									font-size: 9px;
									font-weight: normal;
									color: #845214;
								}
							}
							>div:nth-child(3){
								
							}
						}
					}
				}
			}
		}
	}
</style>
